<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" alt="">
    </swiper-slide>
   
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: "HomeSwiper",
  props: ["swiperList"],
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination : '.swiper-pagination',
        autoplay : 4000,
        observer:true,
        observeParents:true,
        
      },
    };
  },
  
};
</script>

<style scoped>
.swiper-slide {
  width: 100%;
  min-height: 2.6rem;
}
.swiper-slide img {
  width: 100%;
}
>>>.swiper-pagination-bullet-active{
  background-color: #fff;
}
</style>

